<template>
	<div class="alarm-model">
		<!-- 弹窗主体 -->
		<div class="model-content">
			<!-- 头部信息 -->
			<div class="content-top">
				<div class="top">
					<image src="../../static/img/alarm-light.png" mode="" class="light-img"></image>
					<span class="top-title">报警信息</span>
					<div class="sound" v-if="isSpeaker" @click="closeVoice">
						<image src="../../static/img/music.png" mode=""></image>
						<span class="sound-text">关闭</span>
					</div>
					<div class="sound" v-else @click="openVoice">
						<image src="../../static/img/music-xiaoyin.png" mode=""></image>
						<span class="sound-text">开启</span>
					</div>
				</div>
			</div>
			<!-- 九大系统菜单展示区 -->
			<div class="system-dispaly">
				<template>
					<div v-for="(item,index) in systemData" :key="index">
						<div class='system-list pointer' v-if="item.count>=1" :class="item.isSelect?'active' : ''"
							@tap="slsectSystem(item.system)">
							<image :src="item.icon" mode="" class="system-png"></image>
							<span class='system-text'>{{item.systemName}}</span>
							<!-- 报警设备数量 -->
							<div class="system-count">{{item.count}}</div>
						</div>
					</div>
				</template>
			</div>
			<!-- 主要内容区域 -->
			<div class='main-content'>
				<!-- 内容左边区域 -->
				<div class="content-left">
					<!-- 报警记录 -->
					<div class="alarm-history">
						<!-- 头部 -->
						<div class="alarm-top">
							<div class="top-left">
								<image src="../../static/img/edit.png" mode=""></image>
								<span>报警记录</span>
							</div>

							<div class="top-right">
								<button :class="btnAlarm==0?'active' : ''" @tap="showTodayAlarm">当日</button>
								<button :class="btnAlarm==1?'active' : ''" @tap="showTotalAlarm">全部</button>
							</div>
						</div>
						<!-- 记录部分 -->
						<div class="alarm-list">
							<template v-if="todayAlarm.length>=1">
								<scroll-view scroll-y="true" class="scorll-alarm" @scrolltolower="scrollMoreList">
									<div class="alarm-item pointer" v-for="item in todayAlarm"
										:class="item.isSelect?'active' : ''" :key="item.id"
										@tap="selectCurrentAlarmItem(item.id)">
										<!-- 头部 是否确认和报警时间 -->
										<div class='item-top'>
											<template>
												<div class="top-left" v-if="item.status==1">
													<div class="left-circle"></div>
													<div class="left-status">未确认</div>
												</div>
												<div class="top-left" v-else>
													<div class="left-circle-one"></div>
													<div class="left-status-one">已确认</div>
												</div>
											</template>
											<div class="top-right">
												<span>{{item.lastUploadTime}}</span>
											</div>
										</div>
										<!-- 内部内容 报警原因 -->
										<div class="item-reson">
											<div class="reson-left">
												<div>{{item.addressDesc}}</div>
												<div>{{item.alarmReason}}</div>
											</div>
											<div class="reson-right">
												{{item.alarmCount}}
											</div>
										</div>
									</div>
								</scroll-view>
							</template>
							<div class="no-alarm-list" v-else>
								<image src="../../static/img/no-alarm.png" alt=""></image>
								<div>暂无报警记录</div>
							</div>
						</div>
					</div>
					<!-- 视频监控部分 -->
					<div class="video-monitor">
						<div class="monitor-top">
							<image src="../../static/img/edit.png" mode="" class="light-img"></image>
							<span class="top-title">视频监控</span>
						</div>
						<!-- 内容区域 -->
						<template>
							<div class="monitor-content">
								<!-- 视频播放容器 -->
								<div class="video-open" v-if="videoId">
									<image :src="videoPicurl" class="pointer" mode="" @click="toWatchVideo(videoId)">
									</image>
									<image src="../../static/img/video-open-icon.png" mode="" class="video-icon pointer"
										@click="toWatchVideo(videoId)"></image>
									<!-- 地图标点 -->
									<div class="marker">
										<image src="../../static/img/marker.png" class="marker-icon" mode=""></image>
										<div>{{monitorAddress}}</div>
									</div>

								</div>
								<div class="no-video" v-else>
									<image src="../../static/img/no-alarm.png" alt=""></image>
									<div>暂无关联视频</div>
								</div>

							</div>
						</template>
					</div>

				</div>
				<!-- 内容中间区域 -->
				<div class="content-middle">
					<!-- 建筑详情显示模块 -->
					<div class="middle-build-detail pointer" @tap="toBuildDetail">

						<div class="detail-top">
							<div class="top-left">
								<image src="../../static/img/floor.png" mode="" class="floor-image"></image>
								<span class="floor-text">{{alarmDetail.buildName}}</span>
							</div>
							<div class="top-right pointer" v-if="alarmDetail.showDetail">
								<!-- 详情跳转 -->
								<img v-if="alarmDetail.buildId" title="建筑详情" src="../../static/img/detail.png" alt="" />
							</div>
						</div>
						<!-- 位置描述 -->
						<div class="location-desc">
							<image src="../../static/img/location3.png" mode="" class="location-img"></image>
							<span class="location-text">{{alarmDetail.address}}</span>
						</div>
					</div>

					<!-- 设备详情弹窗 -->
					<div class="middle-device-detail" :style="{'margin-top':[!normalDept?'80px':'']}">
						<div class="device-detail pointer" :style="{'top':[normalDept?'40px':'']}"
							v-if="currentDeviceId">
							<img @click="toDeviceDetail" title="设备详情" v-if="alarmDetail.buildId"
								src="../../static/img/detail.png" alt="" />
						</div>
						<div class="main-device" v-if="todayAlarm.length>=1">


							<!-- 设备头部 -->
							<div class="device-top pointer" @click="toDeviceDetail">
								<div class="top-left">
									<div class="top-title">{{alarmDetail.typeName}}</div>
								</div>
							</div>
							<div class="device-content pointer" @click="toDeviceDetail"
								:style="{'margin-top':[!normalDept?'50px':'']}">
								<!-- 设备轮廓图 -->
								<img :src="alarmDetail.icon" alt="" srcset="" class="device-img">
								<img src="../../static/img/alarm-device-bg.png" alt="" srcset="">
								<div class="device-id">ID:{{alarmDetail.id}}</div>
								<!-- 设备信息 -->
								<div class="alarm-info-item" v-for="(item,index) in currentDeviceInfo"
									:class="[index===0?'active': '',item.class, index%2===1 ? 'right' :'']"
									style="position: absolute;" :key="index">
									<div class="item-num" :style="{'color':[index===0?'rgba(255, 34, 34, 1)':'']}">
										{{item.lastAlarmInfo+item.unit}}
									</div>
									<div class="item-info">
										{{item.pointName}}
									</div>
								</div>
								<div>
									<span style="color: #fff;">{{currentDeviceInfo[0].pointName}}:</span>
									<span
										style="color: #f84242;">{{currentDeviceInfo[0].lastAlarmInfo+currentDeviceInfo[0].unit}}</span>
								</div>
							</div>
							<!-- 设备控制按钮 -->
							<div class="device-contorl" :style="{'margin-top':[!normalDept?'70px':'']}">
								<button class="contorl-item" :class="item.color" v-for="item in systemBtns"
									:key="item.id" @click="toDeal(item.id)">
									<image :src="item.icon" mode=""></image>
									<span>{{item.text}}</span>
								</button>
							</div>
						</div>
						<!-- 无报警情况 -->
						<div class="no-main-device" v-else>
							<image src="../../static/img/no-alarm.png" alt=""></image>
							<div>暂无设备</div>
						</div>
						<!-- 尾部部分 -->
						<div class="device-footer" v-if="normalDept">
							<div class="footer-left">
								<!-- 负责人头部 -->
								<div class="left-top">
									<image src="../../static/img/edit.png" mode="" class="top-img"></image>
									<span>消防负责人</span>
								</div>
								<!-- 负责人列表 -->
								<div class="people-list" v-if="safetyPeople.length>=1">
									<div class="people-item" v-for="(item,index) in safetyPeople" :key="item.uesrId"
										:class="[index===safetyPeople.length-1?'active':'']">
										<image src="../../static/img/people.png" mode="" class="people-img"></image>
										<div class="people-info">
											<span
												style="font-size: 14px;color: rgba(255, 255, 255, 0.7);">{{item.username}}</span>
											<span style="font-size: 14px;">{{item.phone}}</span>
										</div>
									</div>


								</div>
								<div class="no-safety-people" v-else>
									<image src="../../static/img/no-alarm.png" alt=""></image>
									<div>暂无消防负责人</div>
								</div>
							</div>
							<div class="footer-right">
								<!-- 负责人头部 -->
								<div class="right-top">
									<div class="top-left">
										<image src="../../static/img/edit.png" mode="" class="top-img"></image>
										<span>报警消息推送记录</span>
									</div>
								</div>
								<!-- 推送列表 -->

								<div class="tuisong-list" v-if="pushLogDatas.length>=1">
									<scroll-view scroll-y="true" style="height:160px;" @scrolltolower="toLoadMoreLog">
										<template>
											<y-time-line color="rgba(2, 195, 255, 1)">
												<y-time-line-item v-for="(item,index) in pushLogDatas" :key="index"
													:showLine="pushLogDatas.length-1===index?false:true"
													style="min-height: 30px;">
													<view class="textRight">
														[{{pushTypeFilter(item.pushMethod)["name"]}}] {{item.userName}}
														-
														{{item.phone}}
														<span v-if="item.pushResult === 0"
															style="padding-left: 20px;color:#02C3FF;"
															class="timeline-item-lt textRight">
															{{ pushTypeFilter(item.pushMethod)["result"] }}
														</span>
														<span v-else-if="item.pushResult === 1" class="textRight"
															style="color: #f84242; padding-left: 20px">
															{{ pushTypeFilter(item.pushMethod)["error"] }}
														</span>
														<span v-else style="padding-left: 20px;color:#02C3FF;"
															class="timeline-item-lt textRight">已推送</span>
													</view>
												</y-time-line-item>
											</y-time-line>
										</template>
									</scroll-view>
								</div>

								<div v-else class="no-history">
									<image src="../../static/img/no-alarm.png" alt=""></image>
									<div>暂无推送记录</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<!-- 内容右边区域 -->
				<div class="content-right">
					<!--  -->
					<div class="alarm-dept" v-if="normalDept">
						<!-- 头部板块 -->
						<div class="alarm-top">
							<image src="../../static/img/edit.png" mode="" class="top-img"></image>
							<span>报警单位</span>
						</div>
						<!-- 报警建筑板块 -->
						<div class="alarm-build">
							<scroll-view scroll-y="true" @scrolltolower="loadMoreDept">
								<div class="build-item" v-for="item in currentAlarmDept" :key="item.deptId"
									:class="[item.deptId==currentDeptId?'active':'',item.alarmNum>=2?'alarm':'']"
									@tap="selectAlarmDept(item.deptId)">
									<!-- 头部 -->
									<div class="item-top">
										<div class="circle-png">
											<img src="../../static/img/deptIcon.png" alt="" srcset=""
												v-if="item.alarmNum>=2">
											<img src="../../static/img/deptNormalIcon.png" alt="" v-else>
										</div>

										<div class="floor-name">{{item.deptName}}</div>
									</div>
									<!-- 报警数量 -->
									<div class="total">
										<div class="alarm-num">
											<image src="../../static/img/slices.png" mode=""></image>
											<span>{{item.alarmNum}}</span>
										</div>
										<div class="alarm-num">
											<image src="../../static/img/guzhang.png" mode=""></image>
											<span>{{item.faultNum}}</span>
										</div>
									</div>
								</div>
							</scroll-view>
						</div>
					</div>
					<div class="device-footer" v-else>
						<div class="footer-left">
							<!-- 负责人头部 -->
							<div class="left-top">
								<image src="../../static/img/edit.png" mode="" class="top-img"></image>
								<span>消防负责人</span>
							</div>
							<!-- 负责人列表 -->
							<div class="people-list" v-if="safetyPeople.length>=1">
								<div class="people-item" v-for="(item,index) in safetyPeople" :key="item.uesrId"
									:class="[index===safetyPeople.length-1?'active':'']">
									<image src="../../static/img/people.png" mode="" class="people-img"></image>
									<div class="people-info">
										<span
											style="font-size: 14px;color: rgba(255, 255, 255, 0.7);">{{item.username}}</span>
										<span style="font-size: 14px;">{{item.phone}}</span>
									</div>
								</div>
							</div>
							<div class="no-safety-people" v-else>
								<image src="../../static/img/no-alarm.png" alt=""></image>
								<div>暂无消防负责人</div>
							</div>

						</div>
						<div class="footer-right">
							<!-- 负责人头部 -->
							<div class="right-top">
								<div class="top-left">
									<image src="../../static/img/edit.png" mode="" class="top-img"></image>
									<span>报警消息推送记录</span>
								</div>
							</div>
							<!-- 推送列表 -->

							<div class="tuisong-list" v-if="pushLogDatas.length>=1">
								<scroll-view scroll-y="true" style="height:120px;" @scrolltolower="toLoadMoreLog">
									<template>
										<y-time-line color="rgba(2, 195, 255, 1)">
											<y-time-line-item v-for="(item,index) in pushLogDatas" :key="index"
												:showLine="pushLogDatas.length-1===index?false:true"
												style="min-height: 30px;">
												<view class="textRight">
													[{{pushTypeFilter(item.pushMethod)["name"]}}] {{item.userName}}
													-
													{{item.phone}}
													<span v-if="item.pushResult === 0"
														style="padding-left: 20px;color:#02C3FF;"
														class="timeline-item-lt textRight">
														{{ pushTypeFilter(item.pushMethod)["result"] }}
													</span>
													<span v-else-if="item.pushResult === 1" class="textRight"
														style="color: #f84242; padding-left: 20px">
														{{ pushTypeFilter(item.pushMethod)["error"] }}
													</span>
													<span v-else style="padding-left: 20px;color:#02C3FF;"
														class="timeline-item-lt textRight">已推送</span>
												</view>
											</y-time-line-item>
										</y-time-line>
									</template>
								</scroll-view>
							</div>

							<div v-else class="no-history">
								<image src="../../static/img/no-alarm.png" alt=""></image>
								<div>暂无推送记录</div>
							</div>
						</div>
					</div>

					<!-- 平面图板块 -->
					<div class="pingmian">
						<!--  -->
						<div class="alarm-top">
							<image src="../../static/img/edit.png" mode="" class="top-img"></image>
							<span>平面图</span>
						</div>
						<template>
							<div class="content-model">
								<div class="model" v-if="currentImageNew" ref="model">
									<img :src="currentImage" alt="" srcset="">

									<div class="alarm-marker"
										:style="{'top':[alarmDetail.mark[0]+'px'],'left':[alarmDetail.mark[1]+'px']}">
										<image src="../../static/img/floor-yangan.png" mode=""></image>
									</div>
								</div>
								<div class="no-image" v-else>
									<image src="../../static/img/no-alarm.png" alt=""></image>
									<div>暂无关联平面图</div>
								</div>
								<template>
									<div class="marker" v-if="currentImageNew">
										<image src="../../static/img/marker.png" class="marker-icon" mode=""></image>
										<div style="color: #fff;">{{alarmDetail.addressDesc}}</div>
									</div>
								</template>

							</div>
						</template>
					</div>
				</div>



			</div>
			<!-- 关闭按钮 -->
			<image src="../../static/img/close.png" mode="" class="close-png pointer" @tap="closeModel"></image>
		</div>

		<video-control :videoId='videoId' :deptId="currentDeptId" v-if="videoControlDialog"
			@closeVideoControlModel="isVideoControlModel">
		</video-control>
		<alarm-handling :show.sync="alarmhandleShow" :messageId="handleId" :handleType="handleType"
			@closeAlarmHandling="closeDialog2"></alarm-handling>
		<RemoteControl :show.sync="isShowRemoteControl" :deviceId="currentDeviceId" :deptId="currentDeptId"
			@closeRemoteControl="closeRemoteControl"></RemoteControl>
		<build-detail v-if="buildShow" @isBuildShow='isBuildShow' :deptId='alarmDetail.deptId'
			:buildId='alarmDetail.buildId'></build-detail>
		<device-detail :deviceId="currentDeviceId" :deptId="deptId" :deviceCode='deviceCode'
			@isCloseDevice="isCloseDevice" v-if="deviceShow"></device-detail>


	</div>
</template>

<script>
	import VideoControl from "@/pages/newDetail/videoControl.vue"
	import AlarmHandling from "@/component/dealog/AlarmHandling.vue"
	import RemoteControl from "@/component/dealog/RemoteControl.vue"
	import BuildDetail from "@/component/model/bulidDetail.vue"
	import DeviceDetail from "@/component/model/deviceDetail.vue"
	import videoApi from "@/api/video-api.js"
	import {
		mode
	} from "crypto-js"
	export default {
		components: {
			VideoControl,
			AlarmHandling,
			RemoteControl,
			BuildDetail,
			DeviceDetail
		},

		data() {
			return {
				systemData: [], //系统
				systemBtns: [{
						id: 2,
						text: '误报',
						icon: '../../static/img/wubao.png',
						color: 'yellow'
					},
					{
						id: 3,
						text: '联动控制',
						icon: '../../static/img/liandongkongzhi.png',
						color: 'blue'
					}

				], //系统控制按钮
				currentSystem: '', //当前选择的系统
				todayAlarm: [], //今天报警信息
				totalAlarm: '', //总共报警信息列表
				btnAlarm: 0, //当前是显示今日还是全部
				alarmPage: {
					pageSize: 3,
					pageNum: 1,
					total: ''
				},
				alarmDetail: {},
				currentDeviceId: '', //当前的设备id
				currentDeviceList: [], //当前设备报警的记录
				currentDeviceInfo: [{
					pointName: '',
					lastAlarmInfo: '',
					unit: '',
				}], //当前设备的信息
				currentImage: null,
				currentImageNew: null,
				currentAlarmDept: [], //当前报警单位
				pushLogDatas: [], //当前的推送记录
				videoId: '',
				firstAlarmId: null,
				alarmDeptPage: {
					pageSize: 3,
					pageNum: 1,
					total: ''
				},
				deptId: '', //传递设备详情id
				currentDeptId: null, //当前选中的单位id
				videoControlDialog: false,
				logListPage: {
					pageSize: 6,
					pageNum: 1,
					total: 20,
				},
				alarmhandleShow: false,
				handleType: "2",
				handleId: "",
				isShowRemoteControl: false,
				deviceId: 0,
				deviceCode: 0,
				buildShow: false,
				normalDept: false,
				videoPicurl: null,
				monitorAddress: '',
				safetyPeople: '',
				imgWidth: 0,
				imgHeight: 0,
				deviceShow: false
			}
		},
		props: {
			isSpeaker: {
				default: false
			}
		},
		created() {
			this.init()
		},
		methods: {
			openVoice() {
				if (this.todayAlarm.length > 0) {
					//打开声音
					this.$emit("update:isSpeaker", true);
					//暂停之前的播放
					getApp().globalData.innerAudioContext.stop()
					getApp().globalData.innerAudioContext.play()
				} else {
					uni.showToast({
						title: '当前无报警记录!',
						duration: 1500,
						icon: 'none'
					});
					this.closeVoice();
				}
			},
			closeVoice() {
				//关闭声音
				this.$emit("update:isSpeaker", false);
				getApp().globalData.innerAudioContext.stop()
			},
			init() {
				this.requestSystem()
			},
			//关闭报警弹窗
			closeModel() {
				this.$emit('closeModel', false)
				getApp().globalData.innerAudioContext.stop()
			},
			// 请求九大系统及对应的报警数量
			async requestSystem() {
				let res = await this.$api.getAllSystem({
					deptId: '',
					status: 1,
					confirm: 0
				})
				//给请求数组添加icon图标字段
				res.data = res.data.map((v, index) => {
					v.icon = "../../static/img/" + v.system + '.png'
					return v
				})
				//给请求数组添加是否被选中字段,默认一进来数组第一项选中
				res.data = res.data.map((v, index) => {
					if (index == 0) {
						v.isSelect = true
						this.currentSystem = v.system
						this.getAlarmDept()
						return v
					} else {
						v.isSelect = false
						return v
					}

				})
				this.systemData = res.data
				this.requestAlarmSystem(this.btnAlarm)
			},
			//选择对应的系统
			slsectSystem(system) {
				//请求对应系统的信息
				this.currentSystem = system
				this.requestAlarmSystem(this.btnAlarm)
				this.systemData.forEach(v => {
					if (v.system == system) {
						v.isSelect = true

					} else {
						v.isSelect = false
					}
				})

			},
			//请求选择对应的系统对应的报警信息
			async requestAlarmSystem(display, more) {
				this.currentDeviceId = ''
				this.alarmDetail.buildId = ''
				//判断是不是需要加载更多,不需要就需要把以前的列表清空
				if (!more) {
					this.todayAlarm = []
					this.firstAlarmId = null
				}
				let res = await this.$api.getAlarmSystem({
					system: this.currentSystem,
					deptId: this.currentDeptId,
					displayType: display,
					pageSize: this.alarmPage.pageSize,
					pageNum: this.alarmPage.pageNum
				})
				let res2 = await this.$api.getDeptUser({
					deptId: this.currentDeptId
				})
				this.safetyPeople = res2.data
				if (res.data && res.data.list.length < 1) {
					this.alarmDetail.address = '暂未关联建筑'
					this.alarmDetail.buildName = '暂无地址描述'
					this.videoId = null
					this.currentImage = null
					this.currentImageNew = null
				}
				this.alarmPage.total = res.data.total
				//给请求到的数据添加字段是否选中,并且第一项默认选中
				res.data.list.forEach((v, index) => {
					v.isSelect = false
				})

				if (this.todayAlarm.length < this.alarmPage.total) {
					this.todayAlarm = [...this.todayAlarm, ...res.data.list]
				} else {
					return
				}
				if (this.firstAlarmId) {
					this.todayAlarm.forEach(v => {
						if (v.id == this.firstAlarmId) {
							v.isSelect = true
							this.selectCurrentAlarmItem(v.id)
						} else {
							v.isSelect = false
						}
					})
				} else {
					this.todayAlarm.forEach((v, index) => {
						if (index == 0) {
							v.isSelect = true
							this.selectCurrentAlarmItem(v.id)
						} else {
							v.isSelect = false
						}
					})
				}


			},
			//点击今日获取今日的报警信息
			showTodayAlarm() {
				this.currentDeviceId = null
				this.alarmDetail.buildId = null
				this.btnAlarm = 0
				this.requestAlarmSystem(this.btnAlarm)
				//如果切换回去清空图片和videoid

			},
			//点击全部的报警的信息
			showTotalAlarm() {
				this.currentDeviceId = null
				this.alarmDetail.buildId = null
				this.btnAlarm = 1
				this.requestAlarmSystem(this.btnAlarm)

			},
			//下拉获得更多的报警列表
			scrollMoreList(e) {
				console.log(e)
				if (e) {
					this.alarmPage.pageNum++
					this.requestAlarmSystem(this.btnAlarm, "more")
				}
			},
			//点前当前的报警的每一项
			selectCurrentAlarmItem(id) {
				this.currentDeviceId = null
				this.alarmDetail.buildId = null
				this.pushLogDatas = []
				this.todayAlarm.forEach(v => {
					if (id == v.id) {
						this.firstAlarmId = v.id
						v.isSelect = true
						this.currentDeviceId = v.deviceId + ''
						this.handleId = v.id + ''
						this.getAlarmDetail(id)
						this.getCurrentInfo()
					} else {
						v.isSelect = false
					}
				})

			},
			//获取报警信息的详情
			async getAlarmDetail(id) {
				let res = await this.$api.getAlarmDetail({
					id
				})
				// 处理地址和无建筑情况
				if (!res.data.buildName) {
					res.data.showDetail = false
					res.data.buildName = '暂未关联建筑'
				} else {
					res.data.showDetail = true
				}
				if (!res.data.address) {
					res.data.address = '暂无地址信息'
				}
				switch (this.currentSystem) {
					case "fc_system_wxgy":
						res.data.icon = require("../../static/img/wuxianyangan-model.png")
						break;
					case "fc_system_dqhz":
						res.data.icon = require("../../static/img/dianqihuozai-model.png")
						break;
					case "fc_system_xfdy":
						res.data.icon = require("../../static/img/xiaofangdianyuan-model.png")
						break;
					case "fc_system_xfys":
						res.data.icon = require("../../static/img/xiaofangyongshui-model.png")
						break;
					case "fc_system_wlsb":
						res.data.icon = require("../../static/img/wulianshebei-model.png")
						break;
					case "fc_system_fhm":
						res.data.icon = require("../../static/img/fanghuomen-model.png")
						break;
					case "fc_system_zm":
						res.data.icon = require("../../static/img/zhihuizhaoming-model.png")
						break;
					case "fc_system_cdz":
						res.data.icon = require("../../static/img/congdianzhuang-model.png")
						break;
					case "fc_system_krqt":
						res.data.icon = require("../../static/img/keranqiti-model.png")
						break;
					case "fc_system_xfzj":
						res.data.icon = require("../../static/img/xiaofangzhuji-model.png")
						break;

				}
				this.deviceCode = res.data.deviceCode
				this.currentImageNew = res.data.image
				this.currentImage = uni.getStorageSync('urlText') + '/admin/sys-file/' + res.data.image


				//获得容器大小
				if (res.data.videoId) {
					this.$api.getRealVideoPicture({
						videoId: res.data.videoId,
						isDept: 0
					}).then(res => {
						this.videoPicurl = res.data || "../../static/img/open-video-bg.png"
					})
					this.$api.getMonitorLocation({
						id: res.data.videoId
					}).then(res => {
						this.monitorAddress = res.data.addressDesc
					})
				}


				this.videoId = res.data.videoId
				if (res.data.mark == null) {
					res.data.mark = ''
				}
				this.alarmDetail = res.data

				//需要参数alarmDetail.createTime
				this.getPushAlarm()
				let self = this
				this.$nextTick(() => {
					let img = new Image()
					img.src = uni.getStorageSync('urlText') + '/admin/sys-file/' + res.data.image
					let imgWidth = 0
					let imgHeight = 0
					img.onload = () => {
						imgWidth = img.width
						imgHeight = img.height
						let modelWidth = self.$refs.model.offsetWidth
						let modelHeight = self.$refs.model.offsetHeight
						let widRate = (modelWidth / imgWidth).toFixed(2)
						let heRate = (modelHeight / imgHeight).toFixed(2)
						if (self.alarmDetail.mark && self.alarmDetail.mark != '') {
							self.alarmDetail.mark = self.alarmDetail.mark.split(',')
							self.alarmDetail.mark[0] = self.alarmDetail.mark[0] * heRate - 16
							self.alarmDetail.mark[1] = self.alarmDetail.mark[1] * widRate - 16
						} else {
							self.alarmDetail.mark = []
							self.alarmDetail.mark[0] = modelHeight / 2 - 16
							self.alarmDetail.mark[1] = modelWidth / 2 - 16

						}
					}
				})
				this.currentDeviceId = res.data.deviceId + ''
				let res1 = await this.$api.getDeviceInfo({
					deviceId: res.data.deviceId
				})

				this.currentDeviceInfo = res1.data.filter((v, index) => {
					if (index <= 5) {
						v.class = "position" + index
						return v
					}
				})
				this.currentDeviceInfo.forEach(v => {
					console.log(v.lastAlarmInfo)
					if (!v.lastAlarmInfo) {
						v.lastAlarmInfo = '暂无'
						v.unit = ''
					}
				})
			},
			//获取当前设备的实时信息
			async getCurrentInfo() {
				let res = await this.$api.getDeviceInfo({
					deviceId: this.currentDeviceId
				})
				this.currentDeviceInfo = res.data.filter((v, index) => {
					if (index <= 5) {
						v.class = "position" + index
						return v
					}
				})
				console.log(this.currentDeviceInfo)
			},
			//获取报警单位
			async getAlarmDept() {
				let res = await this.$api.getAlarmDept()
				this.deptId = JSON.parse(uni.getStorageSync('user')).userDeptId
				//如果请求到的单位长度为0,便为普通单位
				if (res.data.length > 0) {
					this.normalDept = true
				} else {
					this.normalDept = false
					this.currentDeptId = JSON.parse(uni.getStorageSync('user')).userDeptId

				}
				this.currentAlarmDept = res.data
			},
			async getPushAlarm() {
				const userObj = JSON.parse(uni.getStorageSync('user'))
				let res = await this.$api.getPushHistory({
					deviceId: this.currentDeviceId,
					createTime: this.alarmDetail.createTime,
					type: 0,
					pageNum: this.logListPage.pageNum,
					pageSize: this.logListPage.pageSize,
					deptId: userObj.userDeptId
				})
				this.pushLogDatas = [...this.pushLogDatas, ...res.data.list]
				this.logListPage.total = res.data.total
			},
			//日志推送加载更多
			toLoadMoreLog(e) {
				if (e) {
					if (this.pushLogDatas.length < this.logListPage.total) {
						this.logListPage.pageNum++
						this.getPushAlarm()
					}
				}
			},
			//点击报警单位
			selectAlarmDept(id) {
				this.currentDeptId = id
				this.deptId = id
				this.requestAlarmSystem(this.btnAlarm)
			},
			//开启视频控制弹窗
			toWatchVideo(id) {
				this.videoControlDialog = true
				this.videoId = id
			},
			isVideoControlModel(val) {
				this.videoControlDialog = val
			},
			//计算当前推送方式
			pushTypeFilter(type) {
				if (type === 1) {
					return {
						name: "App",
						result: "已推送",
						error: "推送失败"
					};
				} else if (type === 2) {
					return {
						name: "短信",
						result: "已发送",
						error: "发送失败"
					};
				} else if (type === 3) {
					return {
						name: "电话",
						result: "已拨通",
						error: "未拨通"
					};
				} else {
					return {
						name: "播报",
						result: "已推送",
						error: "推送失败"
					};
				}
			},
			toDeal(id) {
				// 如果id==2,表示误报
				if (id === 2) {
					this.alarmhandleShow = true
				} else if (id === 3) {
					if (this.alarmDetail.commandFlag) {

						this.isShowRemoteControl = true
					} else {
						this.$notify({
							title: "提示",
							message: "当前设备不支持远程操控",
							type: "warning",
							customClass: "warning"
						});
					}
				}
			},
			closeDialog2() {
				this.requestAlarmSystem(this.btnAlarm)
			},
			//去往建筑详情
			toBuildDetail() {
				if (this.alarmDetail.buildId) {
					this.buildShow = true
				}
			},
			isBuildShow(val) {
				this.buildShow = val
			},
			isCloseDevice(val) {
				this.deviceShow = val
			},
			toDeviceDetail() {
				this.deviceShow = true
			}
		}
	}
</script>

<style lang="scss" scoped>
	.alarm-model {
		width: 100vw;
		height: 100vh;
		background: rgba(0, 0, 0, 0.7);
		position: fixed;
		left: 0;
		top: 0;
		z-index: 2000;
		overflow-y: auto;

		.model-content {
			padding-bottom: 25px;
			position: absolute;
			left: 50%;
			top: 5%;
			transform: translate(-50%, 0);
			width: 81%;
			background: #01192E;
			z-index: 3;

			.content-top {
				position: relative;
				margin-top: 20px;
				display: flex;
				justify-content: center;

				.top {
					display: flex;
					align-items: center;
				}

				.light-img {
					width: 29px;
					height: 31px;
				}

				.top-title {
					color: #02C3FF;
					font-size: 18px;
					margin-right: 6px;
				}

				.sound {
					width: 46px;
					height: 20px;
					background-color: #02C3FF;
					line-height: 20px;
					cursor: pointer;

					image {
						margin-left: 3px;
						width: 13px;
						height: 12px;

					}

					.sound-text {
						color: #fff;
						font-size: 12px;
					}
				}
			}

			.content-top::after {
				content: '';
				display: block;
				position: absolute;
				width: 1560px;
				top: 40px;
				opacity: 0.1;
				border: 1px solid #1ACFFF;
			}

			.close-png {
				position: absolute;
				width: 17px;
				height: 19px;
				right: 20px;
				top: 30px;
			}
		}




		//九大系统筛选展示
		.system-dispaly {
			margin-top: 30px;
			box-sizing: border-box;
			padding-left: 20px;
			display: flex;
			justify-content: center;

			.system-list {
				width: 100%;
				margin-right: 40px;
				width: 120px;
				height: 42px;
				background: url(../../static/img/border.png) no-repeat;
				display: flex;
				align-items: center;
				position: relative;

				.system-png {
					margin-left: 8px;
					width: 20px;
					height: 20px;
					vertical-align: bottom;
				}

				.system-text {
					margin-left: 5px;
					color: rgba(255, 255, 255, 0.7);
				}

				.system-count {
					position: absolute;
					background-color: #FF3D3D;
					border-radius: 20px;
					right: -10px;
					top: -10px;
					color: #fff;
					padding: 0px 7px 1px;
					min-width: 25px;
					text-align: center;
				}
			}

			.active {
				background: url("../../static/img/system-selected.png") no-repeat;
			}
		}

		//主体内容
		.main-content {

			display: flex;

			.content-left {

				flex: 4;

				//报警记录
				.alarm-history {
					margin-top: 20px;

					.alarm-top {
						position: relative;
						margin: 0 20px;
						padding-bottom: 11px;
						border-bottom: 1px solid #1BCEFF;
						display: flex;

						justify-content: space-between;

						.top-right {
							right: 0;
							top: -3px;
							position: absolute;

							button {
								width: 62px;
								height: 28px;
								width: 62px;
								height: 28px;
								background: rgba(0, 20, 44, 0.43);
								box-shadow: inset 0px 0px 5px 0px rgba(0, 183, 255, 0.44);
								border-radius: 2px;
								display: inline-block;
								margin-left: 10px;
								font-size: 12px;
								color: rgba(255, 255, 255, 0.7000);
								line-height: 28px;

								image {
									margin: 0 10px;
								}
							}

							.active {
								background: rgba(0, 20, 44, 0.43);
								box-shadow: inset 0px 0px 5px 0px rgba(0, 183, 255, 1);
								border-radius: 2px;
								border: 1px solid #02C3FF;
								color: rgba(2, 195, 255, 1);
							}

							button:after {
								border: none;
							}
						}

						.top-left {
							display: flex;
							align-items: center;
						}

						image {
							width: 7px;
							height: 16px;
							margin-right: 6px;
						}

						span {
							color: #fff;
							font-size: 16px;
						}
					}

					// 报警列表部分
					.alarm-list {
						margin: 0 20px;
						margin-top: 10px;
						overflow: auto;
						height: 366px;
						background-color: #011425;

						.scorll-alarm {
							height: 305px;
						}

						.alarm-item {
							padding-top: 10px;

							.item-top {
								display: flex;
								align-items: center;
								justify-content: space-between;

								.top-left {
									display: flex;
									align-items: center;

									.left-circle {
										margin-left: 20px;
										width: 8px;
										height: 8px;
										border: 1px solid #fff;
										border-radius: 8px;
									}

									.left-status {
										color: rgba(255, 255, 255, 1);
										font-size: 14px;
										margin-left: 10px;
									}

									.left-circle-one {
										margin-left: 20px;
										width: 8px;
										height: 8px;
										border: 1px solid rgba(2, 195, 255, 1);
										background-color: rgba(2, 195, 255, 1);
										border-radius: 8px;
									}

									.left-status-one {
										color: rgba(2, 195, 255, 1);
										font-size: 14px;
										margin-left: 10px;
									}
								}


								.top-right {
									margin-right: 20px;
									color: rgba(255, 255, 255, 0.4000);
								}
							}

							// 报警原因
							.item-reson {
								margin-top: 10px;
								padding-left: 35px;
								color: rgba(255, 255, 255, 0.7000);
								font-size: 14px;
								display: flex;
								justify-content: space-between;
								align-items: center;

								.reson-left {
									flex: 1;
									font-family: 'PingFangSC-Regular'
								}

								.reson-right {
									padding: 0px 7px 1px;
									background-color: #FF3D3D;
									color: #fff;
									border-radius: 20px;
									text-align: center;
									margin-right: 20px;
								}

								div {
									margin-bottom: 10px;
								}
							}
						}

						.active {
							background: linear-gradient(180deg, rgba(27, 169, 255, 0.28) 0%, rgba(0, 70, 120, 0.14) 100%);
						}

						.no-alarm-list {

							width: 100%;
							background: #011425;
							opacity: 0.8;
							justify-content: center;
							color: rgba(255, 255, 255, .7);
							height: 100%;
							display: flex;
							flex-direction: column;
							align-items: center;

							uni-image {
								width: 132px;
								height: 97px;
							}
						}
					}
				}

				// 视屏监控
				.video-monitor {
					.monitor-top {
						margin: 10px 20px;
						padding-bottom: 11px;
						border-bottom: 1px solid #1BCEFF;
						color: #fff;
						display: flex;
						align-items: center;

						image {
							width: 7px;
							height: 16px;
						}

						span {
							margin-left: 6px;
							font-size: 16px;
						}
					}

					.monitor-content {
						display: flex;
						justify-content: center;
						height: 265px;

						.video-open {
							position: relative;
							width: 100%;
							height: 100%;
							text-align: center;

							image {
								width: 90%;
							}

							.video-icon {
								left: 50%;
								top: 45%;
								transform: translate(-50%, -50%);
								position: absolute;
								width: 32px;
								height: 32px;
							}

							.marker {
								display: flex;
								align-items: center;
								color: #fff;
								margin-left: 20px;
								font-size: 14px;

								.marker-icon {
									width: 18px;
									height: 18px;
								}

								color: #fff;
							}
						}

						.no-video {
							height: 90%;
							width: 90%;
							background: #011425;
							opacity: 0.8;
							justify-content: center;
							color: rgba(255, 255, 255, .7);
							height: 265px;
							display: flex;
							flex-direction: column;
							align-items: center;

							uni-image {
								width: 132px;
								height: 97px;
							}
						}


					}
				}
			}

			.no-content-middle {
				margin-top: 10px;
				flex: 6;
				background: #011425;
				opacity: 0.8;
				color: rgba(255, 255, 255, .7);
				text-align: center;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				height: 769px;

				uni-image {
					width: 132px;
					height: 97px;
				}
			}

			.content-middle {
				flex: 6;
				margin: 20px 0 0 20px;
				height: 600px;
				// 建筑详情模块

				.middle-build-detail {
					background-color: rgba(27, 165, 255, 0.0800);
					// 建筑头部
					box-sizing: border-box;
					padding: 21px 0 0 21px;
					position: relative;

					.detail-top {
						display: flex;
						align-items: center;
						justify-content: space-between;

						.floor-image {
							width: 24px;
							height: 24px;
							margin-right: 5px;
							vertical-align: bottom;
						}

						.floor-text {
							color: rgba(255, 255, 255, 0.8000);
							font-size: 20px;
						}

						.top-right {
							position: absolute;
							right: 20px;
							top: 50%;
							transform: translateY(-50%);
						}
					}

					.location-desc {
						margin-top: 10px;
						display: flex;
						align-items: center;
						padding-bottom: 20px;

						.location-img {
							width: 20px;
							height: 20px;
							margin-right: 5px;
						}

						.location-text {
							color: rgba(255, 255, 255, 0.6000);
						}
					}


				}

				.no-build {
					color: rgba(255, 255, 255, 0.7);
					height: 90px;
					line-height: 90px;
					background-color: rgba(27, 165, 255, 0.0800);
					text-align: center;
				}

				.middle-device-detail {
					box-sizing: border-box;

					.device-detail {
						display: flex;
						justify-content: flex-end;
						color: #02C3FF;
						padding-right: 20px;
						position: relative;
					}

					.main-device {}

					.no-main-device {
						height: 345px;
						margin-top: 10px;
						width: 100%;
						background: #011425;
						opacity: 0.8;
						text-align: center;
						color: rgba(255, 255, 255, .7);
						display: flex;

						flex-direction: column;
						align-items: center;
						justify-content: center;

						uni-image {
							width: 132px;
							height: 97px;
						}
					}

					.device-top {
						width: 100%;
						display: flex;
						justify-content: center;
						padding: 20px;
						font-size: 18px;
						font-family: PingFangSC-Medium;


						.top-left {
							align-items: center;
							color: #FF3D3D;
							width: 100%;
							display: flex;
							justify-content: center;

							img {
								margin-left: 10px;
								width: 14px;
								height: 14px;
							}


						}

						.top-right {
							color: #02C3FF;
						}
					}

					.device-content {
						margin-top: 20px;
						text-align: center;
						position: relative;

						.device-id {
							position: absolute;
							left: 50%;
							bottom: 30%;
							transform: translate(-50%, 0%);
							color: rgba(255, 255, 255, 0.7);
						}

						.device-img {
							position: absolute;
							left: 50%;
							width: 170px;
							height: 170px;
							top: 30%;
							transform: translate(-50%, -50%);
						}

						.alarm-info-item {
							position: absolute;
							left: 50px;
							top: -20px;
							width: 110px;
							height: 65px;
							color: #fff;
							background: url(../../static/img/device-normal-info.png) no-repeat;

							.item-num {
								font-size: 16px;
								color: rgba(2, 195, 255, 1);
								margin-top: 8px;
							}

							.item-info {
								font-size: 12px;
								color: rgba(255, 255, 255, 0.7);
								margin-top: 5px;

							}
						}

						.right {
							background: url(../../static/img/device-normal-info-right.png) no-repeat;
							width: 111px;
							height: 65px;
						}

						//不同标签的定位值
						.position0 {
							left: 7%;
							top: -12%;
						}

						.position1 {
							left: 76%;
							top: -12%;
						}

						.position2 {
							left: 7%;
							top: 24%;
						}

						.position3 {
							left: 76%;
							top: 24%;
						}

						.position4 {
							left: 7%;
							top: 60%;
						}

						.position5 {
							left: 76%;
							top: 60%;
						}

						.active {
							background: url(../../static/img/alarm-device-info.png) no-repeat;
						}
					}

					.all-list {}

					.device-alarm {
						margin-top: 28px;
						display: flex;

						.alarm-left {
							.model-img {
								width: 127px;
								height: 90px;
							}

						}

						.alarm-right {
							padding-top: 24px;
							margin-left: 47px;
							color: #fff;
							font-size: 14px;

							div {
								margin-bottom: 5px;
							}

							.red {
								color: #FF3D3D;
							}
						}
					}

					.device-alarm-info {
						padding: 20px 0;
						width: 640px;
						height: 100px;
						overflow: auto;

						.alarm-info-item {
							display: inline-block;
							border: 1px solid;
							border-image: linear-gradient(360deg, rgba(2, 195, 255, 0.3), rgba(2, 195, 255, 1)) 1 1;
							text-align: center;
							margin-right: 15px;
							width: 140px;
							height: 65px;
							margin-bottom: 10px;
						}
					}

					.device-contorl {
						margin-top: 20px;
						justify-content: center;
						display: flex;
					}

					.contorl-item {
						margin-right: 20px;
						width: 110px;
						height: 36px;
						background: rgba(255, 61, 61, 0.1);
						border: 1px solid #FF3D3D;
						color: #FF3D3D;
						font-size: 14px;
						line-height: 36px;
						border-radius: 0;
						display: flex;
						align-items: center;
						justify-content: center;

						image {
							width: 20px;
							height: 20px;
							vertical-align: middle;
							margin-right: 5px;
						}

					}

					.red {
						color: #FF3D3D;
						border: 1px solid #ff3d3d;
						background: rgba(255, 61, 61, 0.1);
					}

					.yellow {
						color: #FEA940;
						border: 1px solid #FEA940;

						background: rgba(254, 169, 64, 0.1);
					}

					.blue {
						color: #02C3FF;
						border: 1px solid #02C3FF;
						background: rgba(51, 193, 216, 0.1);
					}

					.black {
						color: #fff;
						border: 1px solid #fff;
						background: rgba(255, 255, 255, 0.1);
					}



				}

				.device-footer {
					display: flex;
					margin-top: 30px;

					.footer-left {
						flex: 1;

						.left-top {
							padding-bottom: 11px;
							width: 100%;
							border-bottom: 1px solid #1BCEFF;
							display: flex;
							align-items: center;
						}

						.top-img {
							width: 7px;
							height: 16px;
							margin-right: 6px;
						}

						span {
							color: #fff;
							font-size: 16px;
						}

						.people-list {
							width: 100%;
							height: 210px;
							overflow-y: auto;

							.people-item {
								height: 80px;
								display: flex;
								color: #fff;
								align-items: center;
								border-bottom: 1px solid;
								border-image: linear-gradient(135deg, rgba(58, 233, 255, 0.2), rgba(2, 195, 255, 0.2)) 1 1;

								.people-img {
									width: 50px;
									height: 50px;
									margin-right: 5px;
								}

								.people-info {
									display: flex;
									flex-direction: column;
									font-size: 14px;

									.people-name {
										color: rgba(255, 255, 255, 0.7);
										margin-bottom: 10px;
									}
								}

							}

							.active {
								border: none;
							}


						}

						.no-safety-people {
							margin-top: 10px;
							width: 100%;
							background: #011425;
							opacity: 0.8;
							text-align: center;
							color: rgba(255, 255, 255, .7);
							display: flex;
							height: 200px;
							flex-direction: column;
							align-items: center;
							justify-content: center;

							uni-image {
								width: 132px;
								height: 97px;
							}
						}
					}

					.footer-right {
						margin-left: 33px;
						flex: 1;

						.right-top {
							padding-bottom: 11px;
							width: 100%;
							border-bottom: 1px solid #1BCEFF;
							display: flex;
							align-items: center;
							justify-content: space-between;

							.top-right {
								button {
									display: flex;
									align-items: center;
									width: 100px;
									height: 30px;
									background-color: rgba(0, 20, 44, 0.4300);
									border: 1px solid #02C3FF;

									image {
										width: 19px;
										height: 19px;
										margin: 0 7px;
									}

									span {
										font-size: 12px;
										color: #02C3FF;
									}
								}
							}
						}

						.top-left {
							display: flex;
							align-items: center;
						}

						.top-img {
							width: 7px;
							height: 16px;
							margin-right: 6px;
						}

						span {
							color: #fff;
							font-size: 16px;
						}

						.tuisong-list {
							margin: 10px 0 0 10px;
							height: 180px;
							overflow: auto;
							background: #011425;
							opacity: 0.8;
							padding: 10px;

							.textRight {
								color: rgba(255, 255, 255, 0.7);
								font-family: 'PingFangSC-Regular';
							}

							.tuisong-item {
								display: flex;
								justify-content: space-between;
								margin-bottom: 10px;

								.item-right {
									color: #FF3D3D;
									padding-right: 5px;
								}
							}

							color: #fff;
						}

						.no-history {
							margin-top: 10px;
							width: 100%;
							background: #011425;
							opacity: 0.8;
							color: rgba(255, 255, 255, .7);
							text-align: center;
							display: flex;
							flex-direction: column;
							justify-content: center;
							align-items: center;
							height: 200px;

							uni-image {
								width: 132px;
								height: 97px;
							}
						}
					}
				}
			}

			.content-right {
				flex: 4;
				margin: 20px 25px 0 23px;

				.alarm-top {

					padding-bottom: 11px;
					width: 100%;
					border-bottom: 1px solid #1BCEFF;
					display: flex;
					align-items: center;
				}

				.top-img {
					width: 7px;
					height: 16px;
					margin-right: 6px;
				}

				span {
					color: #fff;
					font-size: 16px;
				}

				.alarm-build {
					box-sizing: border-box;
					padding: 31px 30px 0 20px;
					margin-bottom: 20px;
					height: 366px;
					overflow: auto;
					background: linear-gradient(180deg, rgba(2, 24, 37, 0) 0%, #011425 100%);

					.build-item {
						margin-bottom: 20px;
						width: 370px;
						height: 70px;
						border: 1px solid;
						border-image: linear-gradient(180deg, rgba(2, 159, 255, 1), rgba(0, 171, 255, 0.32)) 1 1;


						background: linear-gradient(180deg, rgba(2, 24, 37, 0) 0%, #011425 100%);

						.item-top {
							margin: 10px 0 0 10px;
							align-items: center;
							display: flex;

							.circle-png {

								width: 13px;
								text-align: center;
								margin-right: 8px;
								display: flex;
								align-items: center;

								img {
									margin-top: 2px;
									vertical-align: bottom;
								}
							}


							.floor-name {
								color: #FF3D3D;
								font-size: 14px;
							}

						}

						.total {
							margin: 10px 0 0 30px;
							display: flex;
						}

						.alarm-num {
							margin-right: 30px;

							image {
								width: 16px;
								height: 16px;
								margin-right: 10px;
							}
						}


					}

					.alarm {
						background: linear-gradient(180deg, rgba(255, 61, 61, 0.23) 0%, rgba(255, 61, 61, 0.06) 100%);
						box-shadow: 0px 0px 6px 0px rgba(255, 61, 61, 0.7);
						border: 1px solid;
						border-image: linear-gradient(180deg, rgba(255, 61, 61, 1), rgba(255, 112, 112, 0.32)) 1 1;
					}

					.active {
						border: 1px solid;
						background: linear-gradient(180deg, rgba(27, 169, 255, 0.28) 0%, rgba(0, 70, 120, 0.14) 100%);
						border-image: linear-gradient(180deg, rgba(2, 159, 255, 1), rgba(0, 171, 255, 0.32)) 1 1;

					}


				}

				.pingmian {
					margin-top: 20px;

					.model-content {
						// position: relative;
					}

					.model {
						position: relative;
						margin-top: 10px;
						display: flex;
						flex-direction: column;
						width: 100%;
						height: 245px;
						display: flex;
						justify-content: center;
						color: #fff;
						align-items: center;

						img {
							height: 100%;
							width: 100%;
						}



						.alarm-marker {
							position: absolute;
							line-height: 32px;

							width: 32px;
							height: 32px;
							background: url(../../static/img/floor-device-alarm.png) no-repeat;
							justify-content: center;
							display: flex;
							align-items: center;

							image {
								width: 24px;
								height: 24px;
							}
						}
					}

					.marker {
						width: 100%;
						margin-top: 5px;
						display: flex;
						justify-content: flex-start;
						align-items: center;

						.marker-icon {
							width: 18px;
							height: 18px;
						}
					}

					.no-image {
						top: 20px;
						left: 0;
						width: 100%;
						background: #011425;
						opacity: 0.8;
						height: 265px;
						display: flex;
						align-items: center;
						justify-content: center;
						flex-direction: column;
						color: rgba(255, 255, 255, .7);
						font-size: 14px;
						margin-top: 10px;

						uni-image {
							width: 132px;
							height: 97px;
						}
					}
				}

				// 普通单位布局
				.device-footer {
					.footer-left {
						flex: 1;

						.left-top {
							padding-bottom: 11px;
							width: 100%;
							border-bottom: 1px solid #1BCEFF;
							display: flex;
							align-items: center;
						}

						.top-img {
							width: 7px;
							height: 16px;
							margin-right: 6px;
						}

						span {
							color: #fff;
							font-size: 16px;
						}

						.people-list {
							width: 100%;
							overflow-y: auto;
							height: 160px;

							.people-item {

								height: 80px;
								padding-bottom: 15px;
								display: flex;
								color: #fff;
								align-items: center;
								border-bottom: 1px solid;
								border-image: linear-gradient(135deg, rgba(58, 233, 255, 0.2), rgba(2, 195, 255, 0.2)) 1 1;

								.people-img {
									width: 50px;
									height: 50px;
									margin-right: 5px;
								}

								.people-info {
									display: flex;
									flex-direction: column;

									.people-name {
										margin-bottom: 10px;
									}
								}

							}


						}

						.no-safety-people {
							margin-top: 10px;
							width: 100%;
							background: #011425;
							opacity: 0.8;
							text-align: center;
							color: rgba(255, 255, 255, .7);
							display: flex;
							height: 160px;
							flex-direction: column;
							align-items: center;
							justify-content: center;

							uni-image {
								width: 132px;
								height: 97px;
							}
						}
					}

					.footer-right {
						margin-top: 20px;
						flex: 1;

						.right-top {
							padding-bottom: 11px;
							width: 100%;
							border-bottom: 1px solid #1BCEFF;
							display: flex;
							align-items: center;
							justify-content: space-between;

							.top-right {
								button {
									display: flex;
									align-items: center;
									width: 100px;
									height: 30px;
									background-color: rgba(0, 20, 44, 0.4300);
									border: 1px solid #02C3FF;

									image {
										width: 19px;
										height: 19px;
										margin: 0 7px;
									}

									span {
										font-size: 12px;
										color: #02C3FF;
									}
								}
							}
						}

						.top-left {
							display: flex;
							align-items: center;
						}

						.top-img {
							width: 7px;
							height: 16px;
							margin-right: 6px;
						}

						span {
							color: #fff;
							font-size: 16px;
						}

						.tuisong-list {
							margin: 10px 0 0 10px;
							height: 140px;
							overflow: auto;
							background: #011425;
							opacity: 0.8;
							padding: 10px;

							.tuisong-item {
								display: flex;
								justify-content: space-between;
								margin-bottom: 10px;

								.item-right {
									color: #FF3D3D;
									padding-right: 5px;
								}
							}

							color: #fff;
						}

						.no-history {
							margin-top: 10px;
							width: 100%;
							background: #011425;
							opacity: 0.8;
							color: rgba(255, 255, 255, .7);
							text-align: center;
							display: flex;
							flex-direction: column;
							justify-content: center;
							align-items: center;
							height: 140px;

							uni-image {
								width: 132px;
								height: 97px;
							}
						}
					}
				}
			}
		}

	}

	//更改时间线样式
	::v-deep .base-time-line-item .dot {
		width: 9px;
		height: 9px;
	}

	::v-deep .base-time-line-item .line {
		top: 5px;
	}
</style>